<script setup lang="ts">
  import { ref } from 'vue'
  const list = ref([
    {id: 0, title: '孟婆汤改善报告', date: '鬼历9901年2月10日', time: 'PM 15:00', address: '会议室101', person:['',''], isStart: false},
    {id: 1, title: '鬼魂审判', date: '鬼历9901年2月9日', time: 'AM 09:00', address: '阎王殿', person:['','',''], isStart: false},
    {id: 2, title: '职工聚餐', date: '鬼历9901年2月11日', time: 'PM 23:30', address: '乱葬岗', person:['','','',''], isStart: false},
    {id: 3, title: '判官高级培训', date: '鬼历9901年2月12日', time: 'AM 10:00', address: '会议室301', person:[''], isStart: false}
  ])
  const active = ref(0)
</script>

<template>
  <div class="z-col home-today z-flex-column">
    <div class="z-flex-justify-between z-flex-align-center box">
      <span class="z-t-bold">今日会议</span>
      <div class="findmore">查看更多<el-icon><Icon icon="ArrowRight"/></el-icon></div>
    </div>
    <div class="z-hidden z-flex-1">
      <el-scrollbar>
        <el-collapse class="z-p-l-16 z-p-r-16" v-model="active" accordion>
          <el-collapse-item :name="item.id" v-for="item in list" :key="item.id">
            <template #title>
              <span class="z-m-r-20">{{ item.time }}</span>
              <span>{{ item.title }}</span>
            </template>
            <div>
              <span class="z-m-r-10">时间：</span>{{ item.date }}
            </div>
            <div>
              <span class="z-m-r-10">地点：</span>{{ item.address }}
            </div>
            <div class="z-flex-align-center z-p-t-10">
              <el-avatar
                class="z-m-r-10"
                v-for="img in item.person"
                :key="img"
                :size="30"
                src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png">
              </el-avatar>
            </div>
            <el-button type="primary" :disabled="!item.isStart" class="z-m-t-10">{{ item.isStart ? '会议开始' : '会议未开始' }}</el-button>
          </el-collapse-item>
        </el-collapse>
      </el-scrollbar>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .home-today{
    height: 310px;
    .el-collapse{border-top: 0; border-bottom: 0;}
    :deep(.el-collapse-item__header){padding: 0 10px;border-bottom: 0;}
    :deep(.el-collapse-item__header.is-active){background-color: #409EFF;color: #fff;}
    :deep(.el-collapse-item__content){padding: 10px 10px 20px;}
  }
</style>